<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> 我的资料 </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-grid class="content">
    <ng-container *ngIf="(isLogin | async)===false; else elseTemplate">
      <ion-card>
        <ion-card-header>
          <ion-card-title>用户登录</ion-card-title>
        </ion-card-header>
        <ion-item class="input">
          <ion-label position="floating">邮箱:</ion-label>
          <ion-input autocomplete="off" [clearInput]="true" type="email" [(ngModel)]="email" [required]="true"></ion-input>
        </ion-item>
        <ion-item class="input">
          <ion-label position="floating">密码:</ion-label>
          <ion-input autocomplete="off" [required]="true" [minlength]="8" type="password" [(ngModel)]="password"></ion-input>
        </ion-item>
        <ion-button (click)="login()" class="btn">登录</ion-button>
      </ion-card>
    </ng-container>
    <ng-template #elseTemplate>
      <div class="profile">
        <ion-item class="input">
          <ion-label>注册邮箱: </ion-label>
          <ion-input [readonly]="true" [value]="(this.userName | async)"> </ion-input>
        </ion-item>
        <ion-item class="input">
          <ion-label>句子数量: </ion-label>
          <ion-input [readonly]="true" [value]="(this.totalQuantity | async)"> </ion-input>
        </ion-item>
        <ion-item class="input">
          <ion-label>当前进度: </ion-label>
          <ion-input [readonly]="true" value="{{'第'+(this.currentChapterNo | async)+'章，第'+(this.currentSequenceNo | async)+'句'}}"> </ion-input>
          <ion-button (click)="openPicker()">选择章节</ion-button>
        </ion-item>

        <ion-item class="input">
          <ion-label>连续播放:</ion-label>
          <ion-toggle (ionChange)="switchAutoPlaying($event)" slot="end" [checked]="(this.autoPlaying | async)"></ion-toggle>
        </ion-item>
        <ion-item class="input">
          <ion-label>播放间隔: </ion-label>
          <ion-range
            (ionChange)="onIonChange($event)"
            [min]="0"
            [max]="10"
            [value]="(this.currentWaitTime | async)"
            [pin]="true"
            [textContent]="(this.currentWaitTime | async)"
            [pinFormatter]="pinFormatter"
          ></ion-range>
        </ion-item>
        <ion-button (click)="logout()" class="btn">登出</ion-button>
      </div>
    </ng-template>
  </ion-grid>
</ion-content>

